<template>
  <div class="list">
    <div class="top">
      <!-- <planSearch @search="search"></planSearch> -->
      <!-- <el-button type="primary"
                 size="mini"
                 style="background-color:#0268F4"
                 @click="openDialog">船期申报</el-button> -->
      <div class="left">
        <div
          :class="activeIndex == null ? 'active' : ''"
          @click="changeTab(null)"
        >
          全部订单
        </div>
        <div
          :class="activeIndex == 'W' ? 'active' : ''"
          @click="changeTab('W')"
        >
          待审核
        </div>
        <div
          :class="activeIndex == 'A' ? 'active' : ''"
          @click="changeTab('A')"
        >
          已审核
        </div>
      </div>

      <div class="middle" @click="changeTab('N')">委托回收站</div>

      <div class="right">
        <!-- <el-button type="primary"
                     slot="reference"
                     @click="setCus"
                     style="background:#0F47B8;margin-right:10px">+ 办单箱公司</el-button> -->
        <el-input
          placeholder="船名或计划号搜索"
          clearable
          v-model="condition.keyword"
          class="input-with-select"
        >
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="containerSelectAll"
          ></el-button>
        </el-input>
      </div>
    </div>
    <div class="select">
      <el-dropdown @command="command('time', $event)">
        <span>
          {{ text1 }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            :command="item"
            v-for="(item, index) in list1"
            :key="index"
            >{{ item.text }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown @command="command('status', $event)">
        <span>
          {{ text2 }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            :command="item"
            v-for="item in planstatus"
            :key="item.key"
            >{{ item.value }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown @command="command('type', $event)">
        <span>
          {{ text3 }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            :command="item"
            v-for="item in planTag"
            :key="item.value"
            >{{ item.title }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>

      <el-dropdown @command="command('ownerState', $event)">
        <span>
          {{ text4 }}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item
            :command="item"
            v-for="item in fxStatusList"
            :key="item.value"
            >{{ item.name }}</el-dropdown-item
          >
        </el-dropdown-menu>
      </el-dropdown>
    </div>
    <myTable
      :data="tableData"
      @del="del"
      :tips="termList"
      @delInfo="containerSelectAll"
      @carPlan="carPlan"
      @driverCertificate="driverCertificate"
    ></myTable>
    <div class="page">
      <el-pagination
        background
        :total="condition.total"
        :page-size="condition.pageSize"
        :page-sizes="[5, 10, 15, 20]"
        :current-page="condition.page + 1"
        @current-change="currentChange"
        @size-change="sizeChange"
        layout="total,sizes,prev, pager, next,jumper"
      >
      </el-pagination>
    </div>
    <el-dialog title="" width="830px" :visible.sync="dialogVisible">
      <addCarTeam
        v-if="dialogVisible"
        :plan-no="planNo"
        :cst-cstmcd="cstTrnscomCd"
        :type="carType"
        @close="dialogVisible = false"
        :see="see"
        :isContainer="true"
        :cntrNo="cntrNo"
      ></addCarTeam>
    </el-dialog>
    <el-dialog title="" width="700px" :visible.sync="dialogVisible1">
      <cusList
        v-if="dialogVisible1"
        @close="dialogVisible1 = false"
        :data="cstCopercdList"
        :data1="customerList"
      ></cusList>
    </el-dialog>
    <el-dialog title="" width="700px" :visible.sync="certificateShow">
      <driverCOut
        v-if="certificateShow"
        @close="certificateShow = false"
        :cargoList="cargoList"
        :cargoCodecargoCode="cargoCodecargoCode"
      ></driverCOut>
    </el-dialog>
  </div>
</template>

<script>
import myTable from "./myTable2.vue";
import addCarTeam from "./moudel/addCarTeam.vue";
import cusList from "./moudel/cusList.vue";
import driverCOut from "./moudel/driverCOut.vue";
import moment from "moment";
export default {
  name: "boxGoods",
  components: { myTable, addCarTeam, cusList, driverCOut },
  data() {
    return {
      carType: "boxGoods",
      tableData: [],
      dialogVisible: false,
      dialogVisible1: false,
      condition: {
        keyword: "",
        selectDateType: 2, //1本月内委托、2近三个月、3半年内、4一年内
        page: 0,
        pageSize: 5,
        planstatus: "", //状态
        planTagExt: "", //类型
        total: 0,
      },
      id: "", //编辑
      colors: [
        "#1075FF",
        "#13D55C",
        "#FF9000",
        "#2970FF",
        "#F56C6C",
        "#043AA7",
        "#00BAFF",
        "#00BAFF",
        "#DDDDDD",
      ],
      planstatus: [
        { key: null, value: "全部状态" },
        { key: "P", value: "初始" },
        { key: "M", value: "待确认" },
        { key: "W", value: "待审核" },
        { key: "R", value: "审核不通过" },
        { key: "A", value: "审核通过" },
        { key: "S", value: "下发成功" },
        { key: "F", value: "下发失败" },
        { key: "Y", value: "已支付" },
        { key: "N", value: "取消" },
      ],
      activeIndex: null,
      list1: [
        {
          text: "全部时间",
          value: null,
        },
        {
          text: "本月",
          value: 1,
        },
        {
          text: "近三个月",
          value: 2,
        },
        {
          text: "近半年",
          value: 3,
        },
        {
          text: "全年",
          value: 4,
        },
      ],
      planTag: [
        { title: "全部状态", value: null },
        {
          title: "提重返空",
          name: "heavyEmpty",
          value: "PFRE",
        },
        {
          title: "提空返重（不指定箱号）",
          name: "emptyHeavyNoNum",
          value: "PERF_NC",
        },
        {
          title: "提空返重（指定箱号）",
          name: "emptyHeavyNum",
          value: "PERF_WC",
        },
        {
          title: "进空",
          name: "emptyBox",
          value: "IE",
        },
        {
          title: "进重",
          name: "heavyBox",
          value: "IF",
        },
        {
          title: "提重",
          name: "heayBoxNum",
          value: "PF",
        },
        {
          title: "提空（不指定箱号）",
          name: "emptyBoxNum",
          value: "PE_NC",
        },
        {
          title: "提空（指定箱号）",
          name: "emptyBoxNoNum",
          value: "PE_WC",
        },
        {
          title: "拆箱",
          name: "unpacking",
          value: "UNBOX",
        },
        {
          title: "装箱（不指定箱号）",
          name: "packingNoNum",
          value: "BOX",
        },
        {
          title: "装箱（指定箱号）",
          name: "packingNum",
          value: "BOX_APPOINT",
        },
      ],
      statusList: [
        { name: "全部类型", value: null },
        {
          name: "待审核",
          value: 0,
        },
        {
          name: "审核通过",
          value: 1,
        },
        {
          name: "审核未通过",
          value: 2,
        },
        {
          name: "预报",
          value: 3,
        },
        {
          name: "下发失败",
          value: 4,
        },
        {
          name: "取消",
          value: 5,
        },
        {
          name: "确报",
          value: 6,
        },
        {
          name: "在港",
          value: 7,
        },
        {
          name: "离港",
          value: 8,
        },
      ],
      fxStatusList: [
        { name: "全部放行状态", value: null },
        {
          name: "已放行",
          value: "ACT",
        },
        {
          name: "未放行",
          value: "REG",
        },
      ],
      text1: "近三个月",
      text2: "全部状态",
      text3: "全部类型",
      text4: "未放行",
      cntrNo: [],
      cstCopercdList: [],
      customerList: [],
      cargoList: {},
      dataSave: {},
      certificateShow: false,
      termList: [],
    };
  },

  methods: {
    setCus() {
      this.customerByType();
      this.getCustomerRelations();
      this.dialogVisible1 = true;
    },
    carPlan(data, perCd) {
      //v-if=""
      this.see = !(
        perCd === data.cstTrnscomCd &&
        ("P" === data.pstatus || "W" === data.pstatus) &&
        !["N"].includes(data.planstatus)
      );
      //console.log(data)
      //this.see = perCd!==data.cstTrnscomCd
      this.cntrNo = ["PERF_NC", "PE_NC", "BOX"].includes(data.planTagExt);
      console.log("iowqueoiuwq");
      console.log(data.planTagExt);
      console.log(["PERF_NC", "PE_NC", "BOX"].includes(data.planTagExt));
      this.planNo = data.planno;
      this.cstTrnscomCd = data.cstTrnscomCd;
      //this.cntrNo=data.planContainers
      console.log(data);
      this.dialogVisible = true;
    },
    /**
     * @Descripttion: 生成二维码
     * @Author: 王文豪
     * @msg:
     * @return {*}
     */
    driverCertificate(data, type) {
      console.log("pppppppppppppppppppppppppppp", data, type);
      if (type == "0") {
        /* 生成二维码 */
        let params = {
          planNo: data.planno,
        };
        this.$api
          .insertBoxCarQRCode(params)
          .then((res) => {
            if (res.success) {
              // if(res.data.length){
              //   this.$api
              //     .generateCode(data.planno)
              //     .then((res) => {
              //       if (res.success) {
              //         console.log('----------',res)
              this.$message.success("生成二维码成功！");
              this.containerSelectAll();
              //   }
              // })
              // .catch((err) => {
              //   console.log(err);
              // })
              // }else{
              //   this.$message.warning('暂无数据')
              // }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else {
        /* 查看凭证 */
        let params = {
          planNo: data.planno,
        };
        this.$api
          .getBoxCarQRCode(params)
          .then((res) => {
            if (res.success) {
              console.log("000000000000000000000", res);
              this.cargoList = res.data;
              this.dataSave = JSON.parse(JSON.stringify(data));
              this.certificateShow = true;
              // if(this.cargoList.length){
              //   this.getQcode(this.cargoList[0].cargoCode,false)
              // }else{
              //   this.$message.warning('未查询到货种数据')
              // }
            }
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    /**
     * @Descripttion: 获取二维码
     * @Author: 王文豪
     * @msg:
     * @param {*} cargoCode
     * @param {*} freshType
     * @return {*}
     */
    getQcode(cargoCode, freshType) {
      this.cargoCodecargoCode = cargoCode;
      console.log("===========33333333333333", this.dataSave.planno);
      let params = {
        planNo: this.dataSave.planno,
        cargoCode: cargoCode,
      };
      this.$api
        .viewCredentials(params)
        .then((res) => {
          if (res.success) {
            console.log("============", res);
            this.certificateInfo = this.dataSave;
            this.certificateInfo.resData = res.data;
            this.certificateShow = true;
            if (freshType) {
              this.sonPageFresh = false;
              this.$nextTick(() => {
                this.sonPageFresh = true;
              });
            }
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    getCustomerRelations() {
      this.$api
        .getCustomerRelations({
          //termCode:''
        })
        .then((res) => {
          this.customerList = res.data;
        })
        .catch();
    },
    customerByType() {
      //持箱人
      this.$api
        .customerByType({ tenantTypeName: "持箱人" })
        .then((res) => {
          this.cstCopercdList = res.data.data;
          //console.log(this.cstCopercdList)
        })
        .catch((err) => {});
    },
    del(id) {
      this.$confirm("此操作将永久删除该数据, 是否继续?", "提示")
        .then(() => {
          this.$api.delSchedules({ id }).then((res) => {
            if (res.code == 200) {
              this.$message.success("删除成功");
              this.find();
            }
          });
        })
        .catch(() => {});
    },

    containerSelectAll() {
      this.$api.term().then((res) => {
        this.termList = res.data.data;
      });
      this.$api.containerSelectAll(this.condition).then((res) => {
        this.tableData = res.data.data;
        this.condition.total = res.data.recordsTotal;
      });
    },
    command(v, e) {
      console.log(v, e);
      if (v == "time") {
        this.condition.selectDateType = e.value;
        this.text1 = e.text;
      } else if (v == "status") {
        this.condition.planstatus = e.key;
        this.text2 = e.value;
      } else if (v == "type") {
        this.condition.planTagExt = e.value;
        this.text3 = e.title;
      } else if (v == "ownerState") {
        this.condition.ownerState = e.value;
        this.text4 = e.name;
      }
      this.containerSelectAll();
    },
    currentChange(e) {
      this.condition.page = e - 1;
      this.containerSelectAll();
    },
    sizeChange(e) {
      this.condition.pageSize = e;
      this.containerSelectAll();
    },
    changeTab(v) {
      this.activeIndex = v;
      this.condition.planstatus = v;
      this.containerSelectAll();
    },
  },

  computed: {},

  mounted() {
    // this.condition.etaMin = this.list1[1].value[0]
    // this.condition.etaMax = this.list1[1].value[1]
    //this.find()
    this.containerSelectAll();
  },
};
</script>
<style lang="less" scoped>
.list {
  background-color: #fff;
  padding: 16px 14px;
  min-height: 800px;
  position: relative;
}
.page {
  text-align: right;
  margin-top: 20px;
}
.circle {
  display: flex;
  align-items: center;
  span:first-child {
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 6px;
  }
}
.top {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
  justify-content: space-between;
  font-size: 14px;
  font-family: PingFang SC-Regular-Regular, PingFang SC-Regular;
  font-weight: 400;
  color: #333333;
  .left {
    display: flex;

    div {
      margin-right: 10px;
      padding-bottom: 4px;
      cursor: pointer;
    }
  }
  .middle {
    cursor: pointer;
  }
}
.active {
  border-bottom: 2px solid #0f47b8;
  color: #0f47b8;
}
.right {
  display: flex;
}
.select {
  margin-top: 10px;
  height: 32px;
  background: #f5f5f5;
  border-radius: 0px 0px 0px 0px;
  display: flex;
  align-items: center;
  padding-left: 20px;
}
.el-dropdown {
  margin-right: 200px;
  width: 150px;
  text-align: center;
}
/deep/.el-dialog__header {
  padding: 0;
}
/deep/.el-dialog__body {
  padding: 20px;
}
</style>
